<template>
    <div class="details-box">
        <h4 class="title"></h4>
        <div class="time">
            <span>发布时间：{{ formatDateTime(order.createTime) }}</span>
            <span style="margin-left: 50px;">最近修改时间：{{ formatDateTime(order.updateTime) }}</span>
            <div class="item-style">
                <el-button type="danger" v-if="order.type == 'goods'">加入购物车</el-button>
                <el-popover placement="right" width="320" trigger="hover">
                    <div>
                        <div class="item-sales">买家姓名：<span class="sales-text">{{ ownUserData.nickname }}</span></div>
                        <div class="item-sales">买家地址：<span class="sales-text"></span>{{ order.address }}</div>
                        <div class="item-sales">更新时间：<span class="sales-text">{{ formatDateTime(order.updateTime) }}</span>
                        </div>
                    </div>
                    <template #reference>
                        <div style="color:#fc7373;margin-left:50px;cursor:pointer;display: flex;"
                        @click="changeInfo" v-show="order.type == 'needs'">
                        <div
                            style="margin-right:10px;color:#fff;font-weight:bold;background: #fc7373;width: 20px;height: 20px;border-radius: 10px;line-height: 20px;text-align: center;">
                            !</div>
                        买家信息
                    </div>
                    </template>
                    
                </el-popover>
            </div>
        </div>
        <img :src="'https://rongxiaotong.oss-cn-beijing.aliyuncs.com/order/' + order.picture" v-show="order.picture"
            alt="" />
        <div class="info">
            <div class="content" :title="order.content">{{ order.content }}</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { GetOrderDetailsAPI } from '../api/order'
import { GetOrderOwnDataAPI } from '../api/user'
import { useRoute } from 'vue-router'

const order = ref({
    orderId: '',
    picture: '',
    title: '',
    content: '',
    price: '',
    createTime: '',
    updateTime: '',
    type: '',
    address: ''
})

const route = useRoute()

onMounted(() => {
    getOrderDetails(route.params.orderId as string)
    getOrderOwnData(route.params.orderId as string)
})

function getOrderDetails(orderId: string) {
    GetOrderDetailsAPI({ orderId: orderId })
        .then((res) => {
            if (res.code === 200 && res.msg !== null) {
                order.value = res.data

            }
            if (res.code === 100 && res.msg !== null) {
                ElMessage.error(res.msg)
            }

        })
}

function formatDateTime(createTime: string) {
    const date = new Date(createTime);
    return date.toLocaleString();
}

function changeInfo() {
    console.log(order.value)
}

const ownUserData = ref({
    username: '',
    nickname: '',
    updateTime: '',
})

function getOrderOwnData(orderId: string) {
    GetOrderOwnDataAPI({ orderId: orderId })
        .then((res) => {
            if (res.code === 200 && res.msg !== null) {
                ownUserData.value = res.data

            }
            if (res.code === 100 && res.msg !== null) {
                ElMessage.error(res.msg)
            }

        })
}

</script>

<style lang="less" scoped>
.details-box {
    width: 1100px;
    min-height: 100%;
    height: auto;
    margin: 20px auto;
    padding: 20px;
    background: #fff;
    display: flex;
    flex-direction: column;

    // align-items: center;
    img {
        width: 360px;
        height: 300px;
        margin: 50px auto 20px;
        border-radius: 6px;
    }

    .title {
        font-size: 24px;
        font-weight: bold;
        line-height: 35px;
        max-height: 70px;
        text-align: center;
        margin-bottom: 20px;
    }

    .time {
        margin-top: 5px;
        color: #999;
        display: flex;
        justify-content: flex-end;
    }

    .info {
        width: 100%;
        min-height: 300px;
        border-radius: 6px;
        padding: 10px 20px;
        margin: 0 auto;
        display: flex;
        align-content: center;
        justify-content: center;

        .content {
            min-height: 100px;
            // border: 1px dashed #f2f2f2;
            line-height: 25px;
            padding: 5px 10px;
            /*超出的部分隐藏*/
            overflow: hidden;
            /*文字用省略号替代超出的部分*/
            text-overflow: ellipsis;
            /*弹性伸缩盒子模型显示*/
            display: -webkit-box;
            /*限制在一个块元素显示文本的行数*/
            -webkit-line-clamp: 4;
            /*设置或检索伸缩盒对象的子元素排列方式*/
            -webkit-box-orient: vertical;
        }

        .item-style {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 5px;
        }
    }

    .item-sales {
        color: #333 !important;
        line-height: 30px;
        max-height: 30px;

        .sales-text {
            color: #666;
        }
    }
}
</style>